<template>
	<!-- 编辑页面 -->
	<view class="edit-page">
		<!-- 姓名编辑盒子 -->
		<view class="name-edit-box">
			<!-- 姓名编辑 -->
			<text class="name-edit">姓名</text>
			<!-- 姓名编辑输入框盒子 -->
			<view class="name-edit-input-box">
				<!-- 姓名编辑输入框 -->
				<input type="text" class="name-edit-input" />
			</view>
		</view>
		<!-- 电话编辑盒子 -->
		<view class="phone-edit-box">
			<!-- 电话编辑 -->
			<text class="phone-edit">电话</text>
			<!-- 电话编辑输入框 -->
			<input type="text" class="phone-edit-input" />
		</view>
		<!-- 地区编辑盒子 -->
		<view class="area-edit-box">
			<!-- 使用自定义触发元素来打开选择器 -->
					<view class="trigger-area"  @click="openPicker">
						{{ selectedArea || '地区' }}
					</view>
					<!-- 地区选择器 -->
					<cityPicker
						:column="column" 
						:default-value="defaultValue" 
						:mask-close-able="maskCloseAble" 
						@confirm="confirm" 
						@cancel="cancel" 
						:visible="visible"
					/>
		</view>
		<!-- 详细地址编辑盒子 -->
		<view class="detail-address-edit-box">
			<!-- 详细地址编辑 -->
			<text class="detail-address-edit">详细地址</text>
			<!-- 详细地址编辑输入框 -->
			<input type="text" class="detail-address-edit-input" />
		</view>
		<!-- 邮政编码编辑盒子 -->
		<view class="mail-edit-box">
			<!-- 邮政编码编辑 -->
			<text class="mail-edit">邮政编码</text>
			<!-- 邮政编码编辑输入框 -->
			<input type="text" class="mail-edit-input" />
		</view>
		<!-- 默认收货地址编辑盒子 -->
		<view class="default-address-edit-box">
			<!-- 默认收货地址编辑 -->
			<text class="default-address-edit">设为默认收货地址</text>
			<!-- 设置默认方式盒子 -->
			<view class="default-address-icon-box">
				<!-- 设置默认方式开关 -->
				<image class="default-address-icon" src="/static/image/setting.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	
	const visible = ref(false);
	const maskCloseAble = ref(true);
	const selectedArea = ref(''); // 存储选中的地区
	const defaultValue = ref('420103');
	const column = ref(3);
	
	// 打开选择器
	const openPicker = () => {
		visible.value = true;
	};

	const confirm = (val) => {
	    console.log(val);
	    // 将选中的地区转换为字符串显示
	    selectedArea.value = val.map(item => item.text).join('/');
	    visible.value = false;
	};

	const cancel = () => {
	    visible.value = false;
	};

	// 分享功能
	onShareAppMessage(() => {
	    return {
	        title: '地址管理',
	        path: '/pages/address/address'
	    };
	});

	onShareTimeline(() => {
	    return {
	        title: '地址管理'
	    };
	});
</script>

<style lang="scss">
	// 编辑页面
	.edit-page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		// 姓名编辑盒子
		.name-edit-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			flex-direction: column;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 姓名编辑盒子
			.name-edit-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 姓名编辑
				.name-edit {
					width: px2rpx(57);
					font-size: px2rpx(14);
				}
			}
			// 姓名编辑输入框盒子
			.name-edit-input-box {
				// 姓名编辑输入框
				.name-edit-input {
					width: px2rpx(319);
					height: px2rpx(24);
				}
			}
		}
		// 电话编辑盒子
		.phone-edit-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			flex-direction: column;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 电话编辑盒子
			.phone-edit-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 电话编辑
				.phone-edit {
					font-size: px2rpx(14);
				}
			}
			// 电话编辑输入框
			.phone-edit-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		// 地区编辑盒子
		.area-edit-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			flex-direction: column;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 地区编辑盒子
			.area-edit-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				
			}
		}
		// 详细地址编辑盒子
		.detail-address-edit-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			flex-direction: column;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 详细地址编辑盒子
			.detail-address-edit-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 详细地址编辑
				.detail-address-edit {
					font-size: px2rpx(14);
				}
			}
			// 详细地址编辑输入框
			.detail-address-edit-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		// 邮政编码编辑盒子
		.mail-edit-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			flex-direction: column;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 邮政编码编辑盒子
			.mail-edit-edit-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 邮政编码编辑
				.mail-edit {
					font-size: px2rpx(14);
				}
			}
			// 邮政编码编辑输入框
			.mail-edit-input {
				width: px2rpx(319);
				height: px2rpx(24);
			}
		}
		// 默认收货地址编辑盒子
		.default-address-edit-box {
			border-bottom: px2rpx(1) solid #b3b3b3;
			display: flex;
			flex-direction: column;
			width: px2rpx(319);
			height: px2rpx(24);
			padding: px2rpx(10) px2rpx(16);
			// 默认收货地址编辑盒子
			.default-address-edit-box {
				width: px2rpx(57);
				height: px2rpx(24);
				margin-right: px2rpx(12);
				// 默认收货地址编辑
				.default-address-edit {
					font-size: px2rpx(14);
				}
			}
			// 默认收货地址开关盒子
			.default-address-icon-box {
				display: flex;
				flex-direction: column;
				// 默认收货地址开关
				.default-address-icon {
					width: px2rpx(319);
					height: px2rpx(24);
				}
			}
			
		}
	}
</style>